import React, { Component } from 'react';
import { Modal, Form, Input, Radio, Spin, message,Tree } from 'antd';
import { getListnewArr } from 'utils/utils';
const FormItem = Form.Item;
const TreeNode = Tree.TreeNode;

@Form.create()
export default class RoleEditForm extends Component {
  constructor(props) {
    super(props);
    const { record } = props;
    this.state = {
      treeCheckedKeys: []
    };
  }
  componentWillReceiveProps(nextProps) {
    const nextdata=nextProps.record;
    if(nextdata){
      this.setState({
        treeCheckedKeys: nextdata
      });
    }
    // will be true
    // const recordChanged = nextProps.record !== this.props.record;
    // const {treeCheckedKeys}=this.state;
    // if(recordChanged || treeCheckedKeys.length<=0){
    //   this.setState({
    //     treeCheckedKeys: nextProps.record
    //   });
    // }
  }
  /**
   * 返回表单数据到父组件
   */
  onOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    })
  };
  /**
   * 清除表单数据
   */
  handleFormClear = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      treeCheckedKeys:[]
    })
  };

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  }

  onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
    this.setState({
      treeCheckedKeys:checkedKeys
    })

  }
  render() {
    const { modalType = null, visible, onCancel, loading = false, allDatas=[],record, form } = this.props;
    const { getFieldDecorator } = form;
    let { treeCheckedKeys } = this.state;
    // treeCheckedKeys = treeCheckedKeys.length>0?treeCheckedKeys : record;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    };
    const renderTreeNodes = (data,i)=>{
      return data.map((item) => {
          if (item.children) {
              return (
                <TreeNode title={item.text} key={item.id} dataRef={item}>
                  {renderTreeNodes(item.children,item.id)}
                </TreeNode>
              );
          }else{
              return (
                <TreeNode title={item.text} key={item.id} dataRef={item}/>
              )
          }
      });
  };
    return (
      <span>
        <Modal
          visible={visible}
          title="分配资源"
          okText="提交"
          confirmLoading={loading}
          onCancel={onCancel}
          onOk={this.onOk}
          afterClose={this.handleFormClear}
        >
          <Spin tip="数据加载中..." spinning={loading}>
            <Form layout="vertical" style={{maxHeight:"400px",overflowX:"hidden",overflowY:"auto"}}>
              <FormItem {...formItemLayout} label="资源" hasFeedback>
                {getFieldDecorator('treeCheckedKeys', {
                  // initialValue: [261],
                  initialValue: treeCheckedKeys,
                  rules: [{ required: true, message: '请选择资源！' }],
                })(<Tree
                  checkable
                  showLine
                  onCheck={this.onCheck}
                  // onSelect={this.onSelect}
                  checkedKeys={treeCheckedKeys}//treeCheckedKeys
                  // selectedKeys={treeSelectedKeys}
                  >
                  {renderTreeNodes(allDatas, 0)}
                </Tree>)}
              </FormItem>
            </Form>
          </Spin>
        </Modal>
      </span>
    );
  }
}
